import React, { useState, useEffect } from 'react';
import './syt.css'
import { NavBar, Space, Radio } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
const Syt = () => {
    const navigate = useNavigate();
    //导航
    const right = (
        <div>
            <Space>
                订单中心
            </Space>
        </div>
    )

    // 定义生成 11 位随机数的函数
    const [randomNumber, setRandomNumber] = useState(null);
    useEffect(() => {
        const min = 10000000000;
        const max = 99999999999;
        const newRandomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
        // 更新状态以存储新生成的随机数
        setRandomNumber(newRandomNumber);
    }, [])

    //获取总钱数
    const [totalMoney, setTotalMoney] = useState('');
    useEffect(() => {
        const totalmoney = localStorage.getItem('total');
        if (totalmoney) {
            setTotalMoney(JSON.parse(totalmoney));
        }
    }, [])

    //倒计时
    const [totalSeconds, setTotalSeconds] = useState(30 * 60);
    useEffect(() => {
        if (totalSeconds > 0) {
            // 每秒更新一次倒计时
            const timer = setInterval(() => {
                setTotalSeconds(prevSeconds => prevSeconds - 1);
            }, 1000);
            // 组件卸载时清除定时器，避免内存泄漏
            return () => clearInterval(timer);
        }
    }, [totalSeconds]);
    // 将秒数转换为分钟和秒的格式
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    // 管理选中的支付方式
    const [selectedPayment, setSelectedPayment] = useState('1');
    const handleRadioClick = (value) => {
        if (selectedPayment === value) {
            // 如果当前点击的是已选中的选项，则取消选中
            setSelectedPayment(null);
        } else {
            // 否则，选中该选项
            setSelectedPayment(value);
        }
    };

    //确认支付
    const [xinxi, setxinxi] = useState([])
    useEffect(() => {
        const xin = localStorage.getItem('item')
        setxinxi(JSON.parse(xin))

    })

    return (
        <div style={{ background: "white", width: "100%", height: "100%" }}>
            <NavBar right={right} onBack={() => navigate(-1)} className='syt-nav'>收银台</NavBar>
            <div className='syt-div'>
                <p className='syt-p'>订单编号：{randomNumber}</p>
                <p className='syt-p1'>￥{totalMoney}.00</p>
                <p className='syt-p2'>支付剩余时间：
                    {minutes.toString().padStart(2, '0')}:
                    {seconds.toString().padStart(2, '0')}</p>
            </div>
            <div>
                <p className='syt-p3'>支付方式</p>
                <div className='syt-div1'>
                    <div style={{ display: 'flex' }}>
                        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.eefb8d99c4152f59cc0d5c0c883eb449?rik=EFMWISnAoQuVaw&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2020%2f07-17%2f89079%2fwater_89079_698_698_.png&ehk=B%2boVQbx4fJNlAHhpGpahxhVgGv%2fH3ROGaD0e98Tyvdo%3d&risl=&pid=ImgRaw&r=0" alt="" className='syt-img' />
                        <p className='syt-p4'>微信支付</p>
                    </div>
                    <p className='syt-p4' style={{ marginRight: '0.3rem' }}>
                        <Radio
                            value='1'
                            checked={selectedPayment === '1'}
                            onClick={() => handleRadioClick('1')}
                        />
                    </p>
                </div>
                <div className='syt-div1'>
                    <div style={{ display: 'flex' }}>
                        <img src="https://img.51miz.com/Element/00/82/29/88/b4311040_E822988_fd5e5aed.png" alt="" className='syt-img' />
                        <p className='syt-p4'>支付宝支付</p>
                    </div>
                    <p className='syt-p4' style={{ marginRight: '0.3rem' }}>
                        <Radio
                            value='2'
                            checked={selectedPayment === '2'}
                            onClick={() => handleRadioClick('2')}
                        />
                    </p>
                </div>
                <div className='syt-div1'>
                    <div style={{ display: 'flex' }}>
                        <img src="https://img.88icon.com/download/jpg/20200810/5bef04066d792d421bd5aa4d57bc1a4c_512_512.jpg!bg" alt="" className='syt-img' />
                        <p className='syt-p4'>Apple&nbsp;&nbsp;Pay</p>
                    </div>
                    <p className='syt-p4' style={{ marginRight: '0.3rem' }}>
                        <Radio
                            value='3'
                            checked={selectedPayment === '3'}
                            onClick={() => handleRadioClick('3')}
                        />
                    </p>
                </div>
                <div className='syt-div1'>
                    <div style={{ display: 'flex' }}>
                        <img src="https://pic.nximg.cn/file/20220321/26630113_135005550106_2.jpg" alt="" className='syt-img' />
                        <p className='syt-p4'>银联支付</p>
                    </div>
                    <p className='syt-p4' style={{ marginRight: '0.3rem' }}>
                        <Radio
                            value='4'
                            checked={selectedPayment === '4'}
                            onClick={() => handleRadioClick('4')}
                        />
                    </p>
                </div>
            </div>
            <button className='syt-btn' onClick={queding}>确认支付￥{totalMoney}.00</button>
        </div>
    )
}
export default Syt;